<template>
<div class="supervision_pag">
    <!--面包屑-->
    <Breadcrumb :Breadcrumb="Breadcrumb"></Breadcrumb>
    <!--标题-->
    <div class="contentBox">
        <Table-title :title="this.$route.query.archiveName || ruleForm.archiveName"></Table-title>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!--表格区域-->
            <div class="table-box">
                <h1 class="Basics-title">
                    <h2>基本信息</h2>
                </h1>
                <!--基本信息表格区域-->
                <div class="table-body">
                    <table border bordercolor="#E8E8E8">
                        <tr>
                            <td class="table-lable">姓名</td>
                            <td class="table-input">
                                <el-form-item prop="name">
                                    <el-input v-model="ruleForm.name" placeholder="请输入姓名" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                            <td class="table-lable">单位</td>
                            <td class="table-input">
                                <el-form-item prop="unit">
                                    <el-input v-model="ruleForm.unit" placeholder="请输入单位名称" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                            <td class="table-lable">职务</td>
                            <td class="table-input">
                                <el-form-item prop="post">
                                    <el-input v-model="ruleForm.post" placeholder="请输入职务" :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">操办事由</td>
                            <td class="table-input" colspan="5">
                                <el-form-item prop="reason">
                                    <el-input type="textarea" placeholder="请输入操办事由" v-model="ruleForm.reason" show-word-limit :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">办理具体时间、地点</td>
                            <td class="table-input" colspan="5">
                                <el-form-item prop="detail">
                                    <el-input type="textarea" placeholder="请输入办理具体时间、地点" v-model="ruleForm.detail" show-word-limit :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">邀请人员范围及数量</td>
                            <td class="table-input" colspan="5">
                                <el-form-item prop="inviteRange">
                                    <el-input type="textarea" placeholder="请输入邀请人员范围及数量" v-model="ruleForm.inviteRange" show-word-limit :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">本人承诺</td>
                            <td class="table-input" colspan="5">
                                <el-form-item prop="promise">
                                    <el-input type="textarea" placeholder="请输入本人承诺" v-model="ruleForm.promise" show-word-limit :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">备案意见</td>
                            <td class="table-input" colspan="5">
                                <el-form-item prop="opinion">
                                    <el-input type="textarea" placeholder="请输入备案意见" v-model="ruleForm.opinion" show-word-limit :disabled="nameDisabled"></el-input>
                                </el-form-item>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-lable">填表时间</td>
                            <td class="table-input" colspan="5">
                                <el-form-item prop="fillTime">
                                    <el-date-picker value-format="yyyy-MM-dd" v-model="ruleForm.fillTime" type="date" placeholder="年/月/日" :disabled="nameDisabled" :clearable="false"></el-date-picker>
                                </el-form-item>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <!--附件-->
            <Attachment-upload :attachList.sync="ruleForm.attachList" :detailBtIsLook="!isLooking"></Attachment-upload>
        </el-form>
        <!--吸底按钮-->
        <div class="height-50" v-if="!isLooking"></div>
        <div class="bu-bottom" v-if="!isLooking">
            <el-button type="cancel" @click="resetForm('ruleForm')">取消</el-button>
            <el-button type="confirm" @click="submitForm('ruleForm')">提交</el-button>
        </div>
    </div>
</div>
</template>

<script>
//  面包屑
import Breadcrumb from "@/components/IncorruptibleArchives/Breadcrumb.vue";
//  附件
import AttachmentUpload from "@/components/IncorruptibleArchives/AttachmentUpload.vue";
//标题
import TableTitle from "@/components/IncorruptibleArchives/TableTitle.vue";
export default {
    components: {
        Breadcrumb,
        AttachmentUpload,
        TableTitle
    },
    data() {
        return {
            isLooking: false,
            nameDisabled: false,
            ruleForm: {
                attachList: [],
                personId: this.$route.query.id,
                year: this.$route.query.year,
                archiveName: this.$route.query.archiveName,
            },
            //面包靴跳转数据
            Breadcrumb: [{
                    name: "廉政档案",
                    link: "IncorruptibleArchives",
                },
                {
                    name: "监督对象",
                    link: "supervise",
                },
                {
                    name: "监督对象详情",
                    link: "supervisedetail",
                },
                {
                    name: "新建档案",
                    link: "",
                },
            ],
            rules: {
                name: [{
                    required: true,
                    trigger: "blur",
                }, ],
                unit: [{
                    required: true,
                    trigger: "blur",
                }, ],
                post: [{
                    required: true,
                    trigger: "blur",
                }, ],
                reason: [{
                    required: true,
                    trigger: "blur",
                }, ],
                detail: [{
                    required: true,
                    trigger: "blur",
                }, ],
                inviteRange: [{
                    required: true,
                    trigger: "blur",
                }, ],
                promise: [{
                    required: true,
                    trigger: "blur",
                }, ],
                opinion: [{
                    required: true,
                    trigger: "blur",
                }, ],
                fillTime: [{
                    required: true,
                    trigger: "blur",
                }, ],
            },
        };
    },
    created() {
        this.getDetail()
    },
    methods: {
        //操办婚丧喜庆事宜报告表-详情获取
        getDetail() {
            if (this.$route.query.isBuildEditLook == 2 ||
                this.$route.query.isBuildEditLook == 3) {
                this.Api.getSuperviseHsxqbDetail({
                    id: this.$route.query.id,
                }).then(res => {
                    console.log(res, "操办婚丧喜庆事宜报告表-详情获取");
                    if (res && res.code == 0) {
                        this.ruleForm = res.data;
                    } else {
                        this.$message.error(res.message);
                    }
                })
            }
        },
        // 监督对象-详情页，操办婚丧喜庆事宜报告表-新建
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // type是1说明是监督对象的新建2就是检查对象的新建
                    if (this.$route.query.type == 1) {
                        //isBuildEditLook等于1是新建
                        if (this.$route.query.isBuildEditLook == 1) {
                            this.Api.getSuperviseHsxqbAdd(this.ruleForm).then((res) => {
                                // console.log(res, "监督对象-详情页，操办婚丧喜庆事宜报告表-新建");
                                if (res && res.code == 0) {
                                    this.$router.push({
                                        name: "supervisedetail",
                                        query: {
                                            id: this.$route.query.id,
                                            type: this.$route.query.type,
                                        },
                                    });
                                } else {
                                    this.$message.error(res.message);
                                }
                            });
                        } else if (this.$route.query.isBuildEditLook == 2) { //2是编辑
                            this.Api.getSuperviseHsxqbEdit(this.ruleForm).then(res => {
                                console.log(res, "编辑提交");
                                if (res && res.code === "0") {
                                    this.$message.success("提交成功");
                                    this.$router.push({
                                        name: "supervisedetail",
                                        query: {
                                            id: this.ruleForm.personId,
                                            type: this.$route.query.type,
                                        },
                                    });
                                } else {
                                    this.$message.error(res.message);
                                }
                            })
                        }

                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        //重置表单验证---并清空数据
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

<style lang="less" scoped>
/deep/.table-box {
    padding: 20px;
    background-color: white;
    margin-bottom: 10px;

    .Basics-title {
        padding: 0 0 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
        background-color: white;

        >h2 {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            line-height: 16px;
            border-left: 4px solid #3d7fff;
            padding: 0 0 0 10px;
        }
    }

    .table-body {
        table {
            width: 100%;

            .table-lable {
                width: 8%;
                height: 46px;
                background: rgba(250, 250, 250, 1);
                font-size: 14px;
                font-weight: 600;
                color: rgba(51, 51, 51, 1);
                line-height: 21px;
                padding: 0 0 0 10px;
            }

            .table-input {
                padding: 0 10px;
            }

            .el-input {
                border-radius: 2px;

                .el-input__inner {
                    height: 36px;
                }
            }

            .el-select {
                width: 100%;
            }

            .NativePlace {
                // width: 100%;

                .el-select {
                    width: 32.8%;
                    float: left;
                    margin-right: 10px;
                }

                >.el-input {
                    width: 32.5%;
                    float: left;
                    margin-right: 10px;
                }
            }

            .NativePlace .el-input:last-child {
                margin-right: 0px;
            }

            .el-date-editor {
                width: 100%;

                .el-input__inner {
                    padding-left: 18px;
                }

                .el-input__prefix {
                    left: 91%;
                    top: -5%;
                }
            }

            /deep/.now-load {
                // width: 100%;
                // display: flex;
                .el-select {
                    width: 40.5%;
                    float: left;
                    margin-right: 10px;
                }

                >.el-input {
                    float: left;
                    width: 57%;
                }
            }

            //输入框的最小高度
            .el-textarea {
                margin: 4px 0;

                .el-textarea__inner {
                    min-height: 110px !important;
                }
            }
        }
    }
}

//底部提交安妮u
//底部确认按钮的样式
.bu-bottom {
    margin-top: 20px;
    width: calc(100% - 215px);
    height: 56px;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 200px;
    padding-right: 20px;

    .el-button--cancel {
        width: 70px;
        height: 36px;
        background: rgba(255, 255, 255, 1);
        border-radius: 3px;
        border: 1px solid rgba(215, 219, 224, 1);
        padding: 0;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 22px;
        margin-right: 10px;
    }

    .el-button--confirm {
        width: 70px;
        height: 36px;
        background: rgba(61, 127, 255, 1);
        border-radius: 3px;
        border: 1px solid rgba(215, 219, 224, 1);
        padding: 0;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 22px;
        margin-right: 10px;
    }
}

.height-50 {
    height: 60px;
}

//加入表单验证后的样式调整--开始
.el-form-item {
    margin-bottom: 0;
}

/deep/.el-form-item__content {
    margin-left: 0 !important;
}

.el-form-item::after,
.el-form-item::before {
    display: inline;
}

/deep/.el-form-item__error {
    display: none;
}

//加入表单验证后的样式调整--结束
.supervision_pag {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .contentBox {
        width: 100%;
        height: calc(100% - 56px);
        overflow: auto;
    }
}
</style>
